<template>
  <div class="app-container">
    <el-row style="width: 100%;height: 100%;margin: 0;" :gutter="10">
      <!--区域数据-->
      <el-col :span="4" style="height: 100%;padding-left: 0;">
        <div style="background-color: #FFFFFF;height: 100%;padding: 10px;">
          <el-input :placeholder="filterTypeSelect === 'terminalName' ? '请输入设备名称进行查询' : '请输入设备编号进行查询'" v-model="filterText" class="input-with-select" size="mini">
            <el-select v-model="filterTypeSelect" slot="prepend" placeholder="请选择" style="width: 100px;">
              <el-option label="设备名称" value="terminalName"></el-option>
              <el-option label="设备编号" value="termianlId"></el-option>
            </el-select>
            <!--            <el-button slot="append" icon="el-icon-search" style="width: 40px;"></el-button>-->
          </el-input>
          <div style="height:96%;max-height:96%;overflow-y: auto;margin-top: 10px;" class="treeCont">
          <el-tree
              :data="sheetsTreeList"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              node-key="id"
              :default-expanded-keys="defaultExpandedKeys"
              highlight-current
              v-loading="treeLoading"
              :show-checkbox="queryParams.reportType==='1'"
              @node-click="handleNodeClick"
              @check="handleTreeCheck"
          >
            <template #default="{ node, data}">
              <div class="custom-tree-node"
                   style="display: flex;justify-content: center;align-items: center;font-size: 14px;">
                <span class="iconfont icon-a-jiafangzijianzhu icon-padding" v-if="data.deviceType === 0"></span>
                <span class="iconfont icon-loudong icon-padding" v-if="data.deviceType === 1"></span>
                <span class="iconfont icon-a-homezhuyefangzijia icon-padding" v-if="data.deviceType === 2"></span>
                <span class="iconfont icon-dabiao icon-padding" v-if="data.deviceType !== 0 && data.deviceType !== 1 && data.deviceType !== 2"></span>
                <span>{{ node.label }}</span>
                <span v-if="data.deviceCount!=null" class="device-count">({{data.deviceCount}})</span>
              </div>
            </template>
          </el-tree>
          </div>
        </div>
      </el-col>

      <!--大用户历史数据-->
      <el-col :span="20" style="height: 100%;background-color: #FFFFFF;">
        <el-row class="line-bottom" v-show="showSearch" style="margin: 10px 5px 5px;">
          <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" v-show="showSearch"
                   :label-width="labelWidth">
            <el-row>
              <el-col :span="20">
                <div id="searchFilter" :gutter="10" style="display: flex; flex-wrap: wrap">
                  <el-form-item label="分析类型" prop="reportType">
                    <el-radio-group v-model="queryParams.reportType" size="mini" @change="reportTypeSelectChange">
                      <el-radio-button label="0">单表多时段</el-radio-button>
                      <el-radio-button label="1">多表单时段</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="数据类型" prop="dataType">
                    <el-radio-group v-model="queryParams.dataType" size="mini" @change="dataTypeSelectChange">
                      <el-radio-button label="0">瞬时流量</el-radio-button>
                      <el-radio-button label="1">压力值</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="4" class="search_reset" align="right">
                <el-button v-show="collapseAble" type="text" size="mini" @click="shiftCollapseAble" class="text">
                  <span>
                    {{ fold ? '收起筛选' : '更多筛选' }}
                  </span>
                </el-button>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery" size="mini">查询</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery" size="mini">重置</el-button>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item v-for="(item, index) in queryParams.readDates" label-width="70px"
                            :label="'时间' + (index + 1)" :key="index">
                <el-date-picker :clearable="false" v-model="queryParams.readDates[index]" type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择终端时间" style="width: 130px">
                </el-date-picker>
              </el-form-item>
              <el-form-item v-if="showtime === true">
                <el-button type="text" @click.prevent="moveTime">删除</el-button>
                <el-button type="text" @click="addTime">新增时间</el-button>
              </el-form-item>
            </el-row>
          </el-form>
        </el-row>

        <el-row style="width: 100%;">
          <div id="main" ref="tubiao" :style="getChartBoxStyle"></div>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listAreaTree } from '@/api/datastatistics/terminals/dosageStatics.js'
import {oneterminalsanalysis, multiterminalsanalysis} from "@/api/datastatistics/terminals/terminalanalysis.js"
import moment from 'moment'
import {countTimeMultipleForDay, getIndexInTimeMultipleForDay} from '@/utils/computeDays'
import * as echarts from 'echarts';
import { getAreaTree } from "@/api/tree/index"
import('echarts/theme/macarons')
import {getareadevice} from "@/api/dataquery/terminal/terminalhistory.js";
import {listTerminalsDbTree} from '@/api/record/terminalsdb'

export default {
  name: "Comparison",
  data() {
    return {
      filterTypeSelect: 'terminalName',
      defaultExpandedKeys: [],
      screenHeight: null,
      // 折线图继承
      chartExtend: {
        // 标题
        title: {
          text: ''
        },
        grid: {
          top: '5%',
          left: '5%',
          right: '5%',
          bottom: '6%',
          containLabel: true,
        },
        // x轴
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [], // x轴坐标名称
        },
        // y轴
        yAxis: {
          //2022/10 /chuan 原：流量
          name: '流量(m³/h)',
          type: 'value',
          axisLabel: {
            formatter: '{value} m³'
          }
        },
        // 提示框，鼠标悬浮交互时的信息提示
        tooltip: {
          show: true,
          trigger: 'axis', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        legend: {
          data: [],
          show: true,
          padding: 10
        },
        dataZoom: [{
          start: 0,
          end: 100,
          bottom: 10,
          type: 'slider',
          showDataShadow: false,
          handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '100%'
        }, {
          type: 'inside'
        }],
        // 指定图标的类型
        series: [],
      },
      // 分析类型下拉
      reportTypeList: [
        {
          key: '0',
          value: '单表多时段',

        },
        {
          key: '1',
          value: '多表单时段',
        },
      ],
      datatypelist: [
        {
          key: '0',
          value: '瞬时流量',

        },
        {
          key: '1',
          value: '压力值',
        },
      ],
      size: 'small',
      collapseAble: false,
      fold: false,
      maxShow: '4',
      labelWidth: '70px',
      defaultProps: {
        children: "children",
        label: "label",
        isLeaf: "isLeaf",
        isLeafByUser: "isLeafByUser"
      },
      days: [],
      // 区域树选项
      sheetsTreeList: [],
      // 树状态
      treeVisibale: true,
      // 导出按钮状态
      exportvisible: false,
      // 遮罩层
      treeLoading: true,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        systemFlag: null,
        loginUserId: null,
        reportType: '0',
        dataType: '0',
        location_nb: [],
        readDates: [moment().add(-1, 'days').format('YYYY-MM-DD'), moment().add(-2, 'days').format('YYYY-MM-DD')],
      },
      showtime: true,
      choiseCheckList: [],
      filterText: '',
    };
  },
  created() {
    this.screenHeight = document.body.clientHeight
    this.getTreeList();
    this.tip()
  },
  computed: {
    getChartBoxStyle() {
      return {width: '100%', height: (this.screenHeight - 225) + 'px'}
    },
    loginUserId() {
      return this.$store.state.user.userId
    },
    systemFlag() {
      return this.$store.state.user.systemFlag
    }
  },
  mounted() {
    this.initEchart()
    // 通过最大显示个数控制展开/折叠
    if (this.maxShow > 0) {
      this.minShowControl()
    }
  },
  watch: {
    // 根据名称筛选区域树
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    // 树单选
    checkChange(data, checked) {
      if (checked) {
        this.$refs.tree.setCheckedKeys([data.id]);
      }
    },
    // // 区域树复选框点击事件 只能勾选设备节点
    handleTreeCheck(node, status) {
      const  checkedKeys = node.checkedKeys
      const checkedNodes = this.$refs.tree.getCheckedNodes()
      checkedNodes.forEach(node => {
        if(node.disabled){
          this.$refs.tree.setChecked(node.id, false)
        }
      })
    },

    // 初始化echarts
    async initEchart(typeIndex) {
      let myChart = echarts.init(this.$refs.tubiao)
      await this.renderChart(typeIndex)
      myChart.setOption(this.chartExtend, true)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    // 重置图表
    resetEchart() {
      this.chartExtend = {
        // 标题
        title: {
          text: ''
        },
        grid: {
          top: '10%',
          left: '5%',
          right: '5%',
          bottom: '6%',
          containLabel: true,
        },
        // x轴
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [], // x轴坐标名称
        },
        // y轴
        yAxis: {
          //2022/10 /chuan 原：流量
          name: '',
          type: 'value',
          axisLabel: {
            formatter: '{value} m³'
          }
        },
        // 提示框，鼠标悬浮交互时的信息提示
        tooltip: {
          show: true,
          trigger: 'axis', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        legend: {
          data: [],
          show: true,
          padding: 20
        },
        dataZoom: [{
          start: 0,
          end: 100,
          bottom: 10,
          type: 'slider',
          showDataShadow: false,
          handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '100%'
        }, {
          type: 'inside'
        }],
        // 指定图标的类型
        series: []
      }
    },
    // 渲染图表
    renderChart(typeIndex) {
      this.days = countTimeMultipleForDay(1)
      this.chartExtend.xAxis.data = this.days
    },
    // 获取纵坐标
    handleOneTerminalData(data) {
      debugger
      let res = Object.values(data)
      let key = Object.keys(data)
      this.chartExtend.legend.data = this.queryParams.readDates
      for (let i = 0; i < res.length; i++) {
        // 折线
        let seriesItem = {
          name: '', // 系列名称
          type: 'line', // 类型：线
          smooth: true,
          data: [], // 数据
          markPoint: {
            // 标注图形数据
            data: [{
              type: 'max', // 类型
              symbol: 'pin', // 标志图形类型，默认自动选择（8种类型循环使用，不显示标志图形可设为'none'），默认循环选择类型有：'circle' | 'rectangle' | 'triangle' | 'diamond' |'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond' 另外，还支持五种更特别的标志图形'heart'（心形）、'droplet'（水滴）、'pin'（标注）、'arrow'（箭头）和'star'（五角星），这并不出现在常规的8类图形中，但无论是在系列级还是数据级上你都可以指定使用，同时，'star' + n（n>=3)可变化出N角星，如指定为'star6'则可以显示6角星
              name: '最大值'
            },
              {
                type: 'min', // 类型
                symbol: 'pin',
                name: '最小值'
              },
            ],
            // 特殊标注文字v/
            label: {
              normal: {
                show: true,
                //position: 'top', // 文字位置
                // 显示的文字
                formatter: '{b}：{c}',
              }
            },
            // 触发操作
            tooltip: {
              show: true, // 是否显示
              formatter: '{b}：{c}', // 内容格式器 a（系列名称），b（类目值），c（数值）, d（无）
              trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
            },
          },
          // 折线图圆点
          label: {
            normal: {
              show: false,
              formatter: '{c}',
              textStyle: {
                color: '#000' // 文字颜色
              }
            }
          },
        }
        this.chartExtend.series.push(seriesItem)
        let _list = res[i]
        let ylistitem = []
        for (let j = 0; j < _list.length; j++) {
          ylistitem = []
          let newReaddate = _list[j].readDate
          let newInstantNumber = _list[j].instantNumber
          let newPressure = _list[j].pressure
          if (this.queryParams.dataType === '0') {
            this.chartExtend.yAxis.name = '流量(m³/h)'
            this.chartExtend.yAxis.axisLabel.formatter = '{value} m³'
            this.chartExtend.series[i].name = '瞬时流量'
            ylistitem.push(newReaddate.substring(11, 16), newInstantNumber)
            seriesItem.name = key[i]
            seriesItem.data.push(ylistitem)
            this.chartExtend.series[i] = seriesItem
          } else if (this.queryParams.dataType === '1') {
            this.chartExtend.yAxis.name = '压力值(MPA)'
            this.chartExtend.yAxis.axisLabel.formatter = '{value} MPa'
            this.chartExtend.series[i].name = '压力值'
            ylistitem.push(newReaddate.substring(11, 16), newPressure)
            seriesItem.name = key[i]
            seriesItem.data.push(ylistitem)
            this.chartExtend.series[i] = seriesItem
          }
        }
      }
      this.initEchart()
    },
    handleMultiTerminaData(data) {
      let res = Object.values(data)
      let key = Object.keys(data)
      let legendslist = []
      let lengndsValue = []
      this.$refs.tree.getCheckedNodes().forEach((item) => {
        legendslist.push(item.locationNb)
        lengndsValue.push(item.label)
      })
      this.chartExtend.legend.data = lengndsValue
      for (let i = 0; i < res.length; i++) {
        // 折线
        let seriesItem = {
          name: '', // 系列名称
          type: 'line', // 类型：线
          smooth: true,
          data: [], // 数据
          markPoint: {
            // 标注图形数据
            data: [{
              type: 'max', // 类型
              symbol: 'pin', // 标志图形类型，默认自动选择（8种类型循环使用，不显示标志图形可设为'none'），默认循环选择类型有：'circle' | 'rectangle' | 'triangle' | 'diamond' |'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond' 另外，还支持五种更特别的标志图形'heart'（心形）、'droplet'（水滴）、'pin'（标注）、'arrow'（箭头）和'star'（五角星），这并不出现在常规的8类图形中，但无论是在系列级还是数据级上你都可以指定使用，同时，'star' + n（n>=3)可变化出N角星，如指定为'star6'则可以显示6角星
              name: '最大值'
            },
              {
                type: 'min', // 类型
                symbol: 'pin',
                name: '最小值'
              },
            ],
            // 特殊标注文字v/
            label: {
              normal: {
                show: true,
                //position: 'top', // 文字位置
                // 显示的文字
                formatter: '{b}：{c}',
              }
            },
            // 触发操作
            tooltip: {
              show: true, // 是否显示
              formatter: '{b}：{c}', // 内容格式器 a（系列名称），b（类目值），c（数值）, d（无）
              trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
            },
          },
          // 折线图圆点
          label: {
            normal: {
              show: false,
              formatter: '{c}',
              textStyle: {
                color: '#000' // 文字颜色
              }
            }
          },
        }
        this.chartExtend.series.push(seriesItem)
        let _list = res[i]
        let ylistitem = []
        for (let j = 0; j < _list.length; j++) {
          ylistitem = []
          let newReaddate = _list[j].readDate
          let newInstantNumber = _list[j].instantNumber
          let newPressure = _list[j].pressure
          if (this.queryParams.dataType === '0') {
            this.chartExtend.series[i].name = this.chartExtend.legend.data[i]
            this.chartExtend.yAxis.name = '流量(m³/h)'
            this.chartExtend.yAxis.axisLabel.formatter = '{value} m³'
            ylistitem.push(newReaddate.substring(11, 16), newInstantNumber)
            if (key[i] === legendslist[i]) {
              seriesItem.name = lengndsValue[i]
            }
            seriesItem.data.push(ylistitem)
            this.chartExtend.series[i] = seriesItem
          } else if (this.queryParams.dataType === '1') {
            this.chartExtend.yAxis.name = '压力值(MPA)'
            this.chartExtend.yAxis.axisLabel.formatter = '{value} MPa'
            this.chartExtend.series[i].name = this.chartExtend.legend.data[i]
            ylistitem.push(newReaddate.substring(11, 16), newPressure)
            if (key[i] === legendslist[i]) {
              seriesItem.name = lengndsValue[i]
            }
            seriesItem.data.push(ylistitem)
            this.chartExtend.series[i] = seriesItem
          }
        }
      }
      this.initEchart()
    },
    // 重置表单
    resetQuery() {
      this.$refs.tree.setCheckedNodes([]);
      this.$refs.tree.setCurrentKey(null)
      this.queryParams = {
        reportType: '0',
        dataType: '0',
        location_nb: [],
        readDates: [moment().add(-1, 'days').format('YYYY-MM-DD'), moment().add(-2, 'days').format('YYYY-MM-DD')],
      }
      // this.resetEchart()
      // this.initEchart()
      this.handleQuery()
    },
    //减少时间框
    moveTime() {
      let time = this.queryParams.readDates
      if (time.length > 1) {
        this.queryParams.readDates = time.slice(0, time.length - 1)
      } else {
        this.$message.error('最少选择一个时间点！')
      }
    },
    //   添加时间
    addTime() {
      let time = this.queryParams.readDates
      if (this.queryParams.readDates.length < 5) {
        time.push(moment().add(-(time.length + 1), 'days').format('YYYY-MM-DD'))
        this.queryParams.readDates = time
      } else {
        this.$message.error('最多选择五个时间点！')
      }
    },
    //分析类型选择
    reportTypeSelectChange() {
      this.queryParams.readDates = [moment().add(-1, 'days').format('YYYY-MM-DD')]
      let time = this.queryParams.readDates
      if (this.queryParams.reportType === '0') {
        this.showtime = true
        if (time.length < 2) {
          time.push(moment().add(-(time.length + 1), 'days').format('YYYY-MM-DD'))
          this.queryParams.readDates = time
        }
      } else {
        this.showtime = false
      }
    },
    // 数据类型选择
    dataTypeSelectChange() {
      if (this.queryParams.dataType === '0') {
        this.chartExtend.yAxis.name = '流量(m³/h)'
        this.chartExtend.yAxis.axisLabel.formatter = '{value} m³'
      } else if (this.queryParams.dataType === '1') {
        this.chartExtend.yAxis.name = '压力值(MPA)'
        this.chartExtend.yAxis.axisLabel.formatter = '{value} MPa'
      }
      this.handleQuery()
    },
    // 展开折叠按钮
    shiftCollapseAble() {
      this.fold = !this.fold
      this.minShowControl()
    },
    // 通过maxShow控制元素显示/折叠
    minShowControl() {
      const group = window.document.querySelectorAll(`#searchFilter .el-form-item.el-form-item--${this.size}`)
      const len = group?.length ? group?.length - 1 : 0
      if (this.maxShow < len) {
        group.forEach((item, index) => {
          if (index > this.maxShow - 1 && index < len) {
            item.hidden = !this.fold
          }
        })
        this.collapseAble = true
      } else {
        this.collapseAble = false
      }
    },
    // 筛选节点
    filterNode(value, data) {
      if(!value){
        return true
      }else{
        if(this.filterTypeSelect === 'terminalName'){
          return data.label.indexOf(value) !== -1;
        }else {
          if(data.deviceType === 3){
            return data.locationNb.indexOf(value) !== -1;
          }
        }
      }
    },
    // handleNodeExpend(data, node, resolve) {
    //   if (data.treeType === 1) {
    //     node.childNodes = [];
    //   }
    //   if (data.treeType === 1) {
    //     getareadevice(node.data.id).then(response => {
    //       var devicelist = []
    //       if (response.data.length > 0) {
    //         response.data.forEach((item) => {
    //           let deviceobj = {
    //             id: item.TerminalID,
    //             label: item.TerminalName,
    //             children: [],
    //             isLeaf: true,
    //             locationNb: item.locationNb,
    //             treeType: item.treeType
    //           }
    //           devicelist.push(deviceobj)
    //         })
    //       }
    //       data.children = devicelist
    //     })
    //   }
    // },
    // handleNodeCollapse(data, node) {
    //   if (data.treeType === 1) {
    //     node.childNodes = [];
    //   }
    // },
    /** 查询区域下拉树结构 */
    getTreeList() {
      this.treeLoading = true
      this.sheetsTreeList = []
      listAreaTree().then(res => {
        if (res.code === 200) {
          if(res.data.id === 0) {
            this.setDisabled(res.data.children)
            this.sheetsTreeList.push(...res.data.children) // 没有返回termianlId
          }else {
            this.setDisabled(res.data)
            this.sheetsTreeList.push(res.data)
          }
          if(this.defaultExpandedKeys.length){
            this.defaultExpandedKeys = [this.sheetsTreeList[0].id]
          }
          this.treeLoading = false
        }
      })
    },
    setDisabled(treeData) {
      treeData.forEach(item => {
        if(item.deviceType === 0 || item.deviceType === 1 ||item.deviceType === 2){
          item.disabled = true
        }
        if(item.children && item.children.length > 0) {
          this.setDisabled(item.children)
        }
      })
    },
    // copyTree(list) {
    //   list.forEach((item) => {
    //     item.id = item.areaCode;
    //     item.label = item.areaName;
    //     item.children = item.children;
    //     if (item.children && item.children.length) {
    //       this.copyTree(item.children);
    //     }
    //   });
    //   return list;
    // },
    // 区域树懒加载
    // loadNode(node, resolve) {
    //   setTimeout(() => {
    //     if (node.level === 0) {
    //       return resolve(this.areaOptions);
    //     } else if (node.level == 1) {
    //       return resolve(node.data.children)
    //     }
    //   }, 600);
    // },
    // 改变tree的显示与隐藏
    changeTreeShow() {
      this.treeVisibale = !this.treeVisibale
    },
    /** 查询单表多时段数据列表 */
    getoneterminalList() {
      oneterminalsanalysis(this.queryParams).then(response => {
        this.queryParams.location_nb = []
        // let datalist = Object.values(response.data)
        let datalist = response.data
        this.handleOneTerminalData(datalist)
      });
    },
    getmultiterminalList() {
      multiterminalsanalysis(this.queryParams).then(response => {
        this.queryParams.location_nb = []
        // let datalist = Object.values(response.data)
        let datalist = response.data
        this.handleMultiTerminaData(datalist)
      });
    },
    // 页面提示信息
    tip() {
      this.$modal.msgWarning("请选择设备查看数据!")
    },
    handleNodeClick(data){
      // console.log(data,"data")
      this.handleQuery()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.resetEchart()
      this.initEchart()
      this.queryParams.location_nb = []
      if (this.queryParams.reportType === '0') {
        let choiceCheck = this.$refs.tree.getCurrentNode()
        if (!choiceCheck || choiceCheck.disabled) {
          this.$modal.msgWarning("请至少选择一个设备!")
        } else {
          this.queryParams.location_nb.push(choiceCheck.locationNb)
          this.getoneterminalList();
        }
      } else if (this.queryParams.reportType === '1') {
        let choiceCheckList = this.$refs.tree.getCheckedNodes();
        if (choiceCheckList.length < 2) {
          this.$modal.msgWarning("请至少选择两个设备!")
        } else if (choiceCheckList.length > 2) {
          this.$modal.msgWarning("只能选择两个设备!")
        } else {
          choiceCheckList.forEach((item) => {
            this.queryParams.location_nb.push(item.locationNb)
          })
          this.getmultiterminalList();
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
// 设置本身箭头为隐藏状态
::v-deep .el-tree-node__expand-icon {
  width: 20px;
  padding: 0;
  margin: 5px 0;

  svg {
    display: none;
    width: 0;
  }
}

// 虚线所需样式
::v-deep .treeCont {
  .el-tree-node{
    width: fit-content;
  }
  .el-tree > .el-tree-node:before {
    //border-top: none;
    padding-left: 0px;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node__content {
    padding-left: 5px !important;
  }

  .el-tree-node__children {
    //overflow: visible !important;
    .el-tree-node {
      position: relative;
      padding-left: 5px;
    }
  }

  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  .el-tree-node__expand-icon.is-leaf {
    width: 4px;
  }

  .el-tree-node__children {
    padding-left: 18px;
  }

  .el-tree-node :last-child:before {
    height: 17px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
    top: 25px;
    width: 0px;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #c0c4cc;
    height: 100%;
    top: -3px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #c0c4cc;
    height: 0px;
    top: 13px;
    width: 16px;
  }
}

// 默认三角行换成加减号
::v-deep .treeCont {
  .el-tree-node__content > .el-tree-node__expand-icon {
    width: 16px;
    //width: 0px;
    padding: 0px;
    font-size: 16px !important;
    margin-right: 5px; //新增
  }

  .el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  //有子节点 且未展开
  .el-tree .el-tree-node__expand-icon:before {
    background: url('../../../assets/images/jia.png') no-repeat;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    background-size: 100% 100%;
  }

  .custom-tree-node .el-icon svg {
    display: block !important;
    color: #000;
  }

  //有子节点 且已展开
  .el-tree .el-tree-node__expand-icon.expanded:before {
    background: url('../../../assets/images/jian.png') no-repeat;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    background-size: 100% 100%;
  }

  //没有子节点
  .el-tree .el-tree-node__expand-icon.is-leaf::before {
    background: none;
    content: "";
    display: block;
    width: 20px;
    height: 20px ;
    font-size: 20px;
    background-size: 100% 100%;
  }

}
/* 隐藏掉el-tree中有disabled属性的框框 */
::v-deep .el-checkbox .is-disabled{
  display: none !important;
}
</style>
